<template>
	<view>
		<u-sticky style="height: 50rpx;">
			<u-tabs :list="list" scrollable="false" @click="tabsChange" lineColor="#00B4C7" lineWidth="10"
				:itemStyle="uTabItemCS" :activeStyle="{color: '#00B4C7'}"></u-tabs>
		</u-sticky>
		<view class="list" v-if="orderList.length">
			<scroll-view scroll-y style="height:90vh;" @scrolltolower="onreachBottom">
				<view class="order_item" v-for="(item, index) in orderList" :key="index">
					<view class="item_title flex fjb">
						<text class="large_font">预约时间：{{ item.appointmentTime+'-'+item.segment }}</text>
						<!-- <text class="status_text" style="color: #00B4C7;">{{item.statusName}}</text> -->
						<text class="status_text" v-if="item.status=='0'" style="color: #00B4C7;">待接受</text>
						<text class="status_text" v-if="item.status=='1'" style="color: #00B4C7;">待上门</text>
						<text class="status_text" v-if="item.status=='3'" style="color: #FA5151;">已取消</text>
						<text class="status_text" v-if="item.status=='2'" style="color: #00B4C7;">已完成</text>
					</view>
					<view class="item_info">
						<view class="flex fjb">
							<text>预约人：</text>
							<text>{{ item.contactName+"·"+item.contactPhone}}</text>
						</view>
						<view class="flex fjb" style="margin-top: 20rpx;">
							<text>服务地址：</text>
							<text>{{ item.address}}</text>
						</view>
					</view>
					<view class="item_bot flex fjb">
						<view class="item_bot_left">
							<!-- <text class="status" v-if="item.status==0">待支付：</text>
							<text class="status" v-else-if="item.status==4">退款金额：</text>
							<text class="status" v-else>合计：</text>
							<text class="price">￥{{ item.totalPrice }}</text> -->
						</view>
						<view class="item_bot_right flex" v-if="item.status == 0 && ylUserInfo.type == '1'">
							<view class="btn btn_default" style="margin-right: 20rpx;" @click="updateOrder(item.orderId, 3)">
								拒绝预约
							</view>
							<view class="btn btn_primary" @click="updateOrder(item.orderId, 1)">
								接受预约
							</view>
						</view>
						<view class="item_bot_right flex" v-if="ylUserInfo.type == '0'">
							<view v-if="item.status == 0" class="btn btn_default" style="margin-right: 20rpx;" @click="updateOrder(item.orderId, 3)">
								取消预约
							</view>
							<view v-if="item.status == 1" class="btn btn_primary" @click="updateOrder(item.orderId, 2)">
								确认完成
							</view>
						</view>
					</view>
				</view>
				<view class="bot_title">
					<u-divider bg-color="#f8f8f8">{{ bottomText }}</u-divider>
				</view>
			</scroll-view>
		</view>
		<view v-else class="empty_box" style="height: 50vh;">
			<image src="../../static/img/empty.png" mode=""></image>
			<text>暂无订单</text>
		</view>
		<!-- <u-modal v-model="showMask" title="支付方式" mask-close-able="true" :show-cancel-button="true" confirm-text="确定"
			@confirm="confirmPay" @cancel="cancelPay">
			<view class="slot-content">
				<u-radio-group v-model="payType" wrap="true">
					<u-radio v-for="(item, index) in payTypeList" :key="index" :name="item.id"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>

			</view>
		</u-modal> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		getOrderListApi
	} from '../../common/API/orderApi.js'
	import {
		updateStatusByType
	} from '../../common/API/doctorApi.js'
	export default {
		data() {
			return {
				status: '', // 当前选中的tab的status
				list: [{
						name: '全部',
						status: ''
					},
					{
						name: '待接受',
						status: 0
					},
					{
						name: '待上门',
						status: 1
					},
					{
						name: '已取消',
						status: 3
					},
					{
						name: '已完成',
						status: 2
					}
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				tabs: [{
					name: '全部'
				}],
				orderId: '',
				orderList: [],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				//判断是否请求完毕数据
				isBottom: false,
				//底部文字
				bottomText: '加载中...',
				showMask: false,
				uTabItemCS: {
					width: "100rpx",
					height: "68rpx",
					color: "#00B4C7"
				},
				current: 0
			}
		},
		onLoad() {
			this.listInit()
			// 判断登录身份
			if(this.ylUserInfo.type == '0'){
				this.list = this.list.filter((item)=>{return item.status !== 0})
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		async onPullDownRefresh() {
			this.listInit()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			listInit() {
				this.pageNum = 1
				this.orderList = []
				this.isBottom = false
				this.bottomText = '加载中...'
				this.getOrderList()
			},
			// tabs通知swiper切换
			tabsChange(item) {
				this.current = item.index;
				this.status = item.status
				this.listInit()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (!this.isBottom) {
					this.pageNum += 1
					this.getOrderList()
				}
			},
			// 分页查询订单
			async getOrderList() {
				const res = await getOrderListApi({
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"status": this.status,
					"userCode": this.ylUserInfo.username,
					"orderType": 13
				})
				if (res.status == 200) {
					res.data.records.forEach((item) => {
						item.appointmentTime = item.appointmentTime && item.appointmentTime.split(' ')[0]
					})
					this.orderList = this.orderList.concat(res.data.records)
					this.total = res.data.total
				}
				if (this.orderList.length >= this.total) {
					this.isBottom = true
					this.bottomText = '没有更多数据了~'
				}
			},

			// 修改状态
			updateOrder(orderId, status) {
				let that = this
				let data = {
					orderId: orderId,
					orderType: 13,
					status: status
				}
				uni.showModal({
					content: '确定修改吗？',
					cancelColor:'#9b9b9b',//删除按钮颜色
					confirmColor:'#00B4C7',//确定按钮颜色
					success: async function(res) {
						if (res.confirm) {
							const res = await updateStatusByType(data)
							// console.log(res)
							if (res.status == 200) {
								uni.$showMsg('修改成功')
								setTimeout(() => {
									that.listInit()
								}, 600)
							}
						}
					}
				})
				
			},
			
		}
	}
</script>


<style scoped lang="scss">
	.list {
		background: #f8f8f8;
		width: 94%;
		margin: 30rpx auto;
	}

	/deep/ .u-tabs__wrapper__nav__item{
		flex: 1;
	}
	.order_item {
		// width: 686rpx
		width: 94%;;
		margin: 0 auto;
		// height: 290rpx;
		background: #FFF;
		padding: 30rpx 20rpx;
		margin-bottom: 30rpx;
		border-radius: 32rpx;

		.item_title {
			font-weight: 500;
			font-size: 34rpx;
			color: #333;
			width: 96%;
			margin: 0 auto;
			padding-left: 10rpx;

			.status_text {
				color: #008CE8;
				font-size: 28rpx;
			}
		}

		.item_info {
			background: #fafafa;
			width: 96%;
			margin: 30rpx auto;
			padding: 20rpx 10rpx;
			border-radius: 32rpx;
		}

		.item_bot {
			width: 96%;
			margin: 0 auto;

			.item_bot_left {
				.status {
					color: #333333;
					font-size: 28rpx;
				}

				.price {
					color: #FA5151;
					font-size: 34rpx;
					font-weight: 500;
				}
			}
		}
	}


	.slot-content {
		margin: 30rpx;

		/deep/.u-radio {
			display: flex;
			flex-direction: row-reverse;
			margin-bottom: 20rpx;

			.u-radio__label {
				width: 90%;
			}
		}

	}
</style>